<template>
  <div class="bodyStyle">
    <a-carousel arrows autoplay v-if="slideshow">
      <template #prevArrow>
        <div class="custom-slick-arrow" style="left: 10px; z-index: 1">
          <left-circle-outlined/>
        </div>
      </template>
      <template #nextArrow>
        <div class="custom-slick-arrow" style="right: 10px">
          <right-circle-outlined/>
        </div>
      </template>
      <div v-for="(banner,index) in bannerList" :key="index">
        <img :src="banner.image" class="imgCssClass" @click="imgClick(banner)" alt>
      </div>
    </a-carousel>
    <div class="contentClass">
      <div class="cardGroup">
        <div class="cardClass4" @click="clardClick(4)" :class="{'Color4':module4}">
          <bar-chart-outlined :style="{fontSize: '50px'}" class="iconClass"/>
          <p class="textClass">好评推荐</p>
        </div>
        <div class="cardClass1" @click="clardClick(1)" :class="{'Color1':module1}">
          <folder-open-outlined :style="{fontSize: '50px' }" class="iconClass"/>
          <p class="textClass">实验课程</p>
        </div>
        <div class="cardClass2" @click="clardClick(2)" :class="{'Color2':module2}">
          <sound-outlined :style="{fontSize: '50px'}" class="iconClass"/>
          <p class="textClass">通知公告</p>
        </div>
        <div class="cardClass3" @click="clardClick(3)" :class="{'Color3':module3}">
          <profile-outlined :style="{fontSize: '50px'}" class="iconClass"/>
          <p class="textClass">新闻咨询</p>
        </div>
      </div>
      <!--   跳转组件   -->
      <div class="pageClass">
        <experimentalCurriculum v-if="module1"></experimentalCurriculum>
        <inform v-if="module2"></inform>
        <journalism v-if="module3"></journalism>
        <rankingList v-if="module4"></rankingList>
      </div>
      <div style="float: left; background-color: white; width: 100% ; height: 200px"></div>
    </div>
  </div>
</template>
<script>
import {defineComponent, ref, toRaw} from 'vue';
import experimentalCurriculum from './comm/experimentalCurriculum';
import inform from './comm/inform';
import journalism from './comm/journalism';
import rankingList from './comm/rankingList';
import {LeftCircleOutlined, RightCircleOutlined} from '@ant-design/icons-vue';
import {homeRecommendation} from "@/api/module/experiment";
import router from "@/route";

export default defineComponent({
  components: {
    LeftCircleOutlined,
    RightCircleOutlined,
    experimentalCurriculum,
    inform,
    journalism,
    rankingList,
  },
  data() {
    return {
      // bannerList:,
    }
  },
  setup() {
    const bannerList = ref([])
    const divShow = ref(false) // 轮播图
    const slideshow = ref(true) // 轮播图
    const module1 = ref(false)
    const module2 = ref(false)
    const module3 = ref(false)
    const module4 = ref(true)
    const clardClick = (value) => {
      if (value == 1) {
        slideshow.value = false
        divShow.value = true
        module1.value = true
        module2.value = false
        module3.value = false
        module4.value = false
      } else if (value == 2) {
        slideshow.value = false
        divShow.value = true
        module1.value = false
        module2.value = true
        module3.value = false
        module4.value = false
      } else if (value == 3) {
        slideshow.value = false
        divShow.value = true
        module1.value = false
        module2.value = false
        module3.value = true
        module4.value = false
      } else if (value == 4) {
        slideshow.value = true
        divShow.value = false
        module1.value = false
        module2.value = false
        module3.value = false
        module4.value = true
      }
    }
    const imgClick = (value) => {
      console.log("轮播图点击事件+",toRaw(value))
      localStorage.setItem("aaa","2")
      router.push({
        path: '/scan/comm/details/experimentalDetails',
        query: {
          id: JSON.stringify(toRaw(value).id)
        }
      })
    }
    const routerIndex = () => {
      let item = localStorage.getItem("aaa");
      console.log("跳转的值--", item)
      if (item == null || item == undefined) {
        return
      } else if (item == 1) {
        slideshow.value = false
        divShow.value = true
        module1.value = true
        module2.value = false
        module3.value = false
        module4.value = false
      } else if (item == 2) {
        slideshow.value = true
        divShow.value = false
        module1.value = false
        module2.value = false
        module3.value = false
        module4.value = true
      }else if (item == 3) {
        slideshow.value = false
        divShow.value = false
        module1.value = false
        module2.value = true
        module3.value = false
        module4.value = false
      }else if (item == 4) {
        slideshow.value = false
        divShow.value = false
        module1.value = false
        module2.value = false
        module3.value = true
        module4.value = false
      }
      localStorage.removeItem("aaa")
    }
    // 获取页面数据
    const getListDate = () => {
      homeRecommendation({}).then((response) => {
        bannerList.value = response.data
        console.log("首页执行结果", toRaw(bannerList.value))
      })
    }
    getListDate()

    routerIndex()
    return {
      clardClick,
      imgClick,
      slideshow,
      divShow,
      module1,
      module2,
      module3,
      module4,
      bannerList,
    };
  },

});
</script>
<style lang="less" scoped>
.bodyStyle {
  width: 100%;
  height: 100%;

}


.contentClass {
  width: 100%;
  float: left;
  //background-color: #F8F9FD;
  background-color: white;
}

.cardGroup {
  width: 80%;
  height: 40%;
  float: left;
  margin-left: 10%;
  margin-top: 2%;
}

.cardClass1 {
  width: 22%;
  height: 40%;
  float: left;
  margin-left: 4%;
  border-radius: 10px;
  background-color: #d4eae5;
  color: #4fa490;
  font-weight: 700;

}

.cardClass2 {
  width: 22%;
  height: 40%;
  float: left;
  margin-left: 4%;
  //background-color: #ffffff;
  border-radius: 10px;
  background-color: #f9ead3;
  color: #e9b25b;
  font-weight: 700;


}

.cardClass3 {
  width: 22%;
  height: 40%;
  float: left;
  margin-left: 4%;
  //background-color: #ffffff;
  border-radius: 10px;
  font-weight: 700;
  background-color: #f6d8cd;
  color: #de724c;


}

.cardClass4 {
  width: 22%;
  height: 40%;
  float: left;
  //background-color: #ffffff;
  background-color: #c2e3fa;
  color: #128ade;
  border-radius: 10px;
  font-weight: 700;

}

.cardClass1:hover {
  //background-color: #cdd1e4;
  background-color: #4fa490;
  color: white;
  cursor: pointer;
}

.cardClass2:hover {
  background-color: #e9b25b;
  color: white;
  cursor: pointer;
}

.cardClass3:hover {
  background-color: #de724c;
  color: white;
  cursor: pointer;
}

.cardClass4:hover {
  background-color: #128ade;
  color: white;
  cursor: pointer;
}

.Color1 {
  background-color: #4fa490;
  color: white;

}

.Color2 {
  background-color: #e9b25b;
  color: white;
}

.Color3 {
  background-color: #de724c;
  color: white;

}

.Color4 {
  background-color: #128ade;
  color: white;
}

.iconClass {
  width: 30%;
  /* 图片宽度高度的一半才能居中 */
  margin-left: 35%;
  margin-top: 20%;
}

.textClass {
  font-size: 20px;
  margin-left: 38%;
  margin-top: 10%;
  //color: #3498db;
}

.pageClass {
  margin-top: 100px;
}


// 图片跑马灯所需样式
/* For demo */
.imgCssClass {
  width: 100%;
  height: 500px;
}

.ant-carousel :deep(.slick-slide) {
  text-align: center;
  height: 500px;
  line-height: 500px;
  overflow: hidden;
}

.ant-carousel :deep(.slick-arrow.custom-slick-arrow) {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #fff;
  background-color: rgba(31, 45, 61, 0.11);
  opacity: 0.3;
  z-index: 1;
}

.ant-carousel :deep(.custom-slick-arrow:before) {
  display: none;
}

.ant-carousel :deep(.custom-slick-arrow:hover) {
  opacity: 0.5;
}

.ant-carousel :deep(.slick-slide h3) {
  color: #fff;
}




#components-back-top-demo-custom .ant-back-top {
  bottom: 100px;
}
#components-back-top-demo-custom .ant-back-top-inner {
  height: 40px;
  width: 40px;
  line-height: 40px;
  border-radius: 4px;
  background-color: #1088e9;
  color: #fff;
  text-align: center;
  font-size: 20px;
}
</style>
